<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
			<style type="text/css">
				*{
					margin: 0px;
					padding:0px;
					 }
				ul,li{
					margin: 0px;
					padding:0px;
					list-style-type: none;
				
				}
				img{
					border:0px;
				}
				body{
					font-size: 12px;
				}
				#list-up{
					width: 40px;
					position: absolute;
					top: 40%;
					color: white;
				}
				#list-up li{
					margin-top: 20px;
					width: 40px;
					height: 40px;	
					text-align: center;
					line-height: 40px;
					
				}
				#list-down{
					width: 40px;
					position: absolute;
					bottom: 1%;
					color: white;
				}
				
				#list-down li{
					margin-top: 10px;
					width: 40px;
					height: 40px;	
					text-align: center;
					line-height: 40px;
					
				}
				#cart,#per-c,#heart,#indent,#kef,#db{
					position: absolute;
					right: 40px;
					text-align: center;
					background: #999999;
					width: 80px;
					height: 40px;
					line-height: 40px;
				}
				#cart{
					top: 8%;
				}
				#per-c{
					top: 33%;
				}
				#heart{
					top: 58%;
				}
				#indent{
					top: 84%;
				}
				#kef{
					top: 10%;
				}
				#db{
					top: 60%;
				}
			</style>
		<title></title>		
		<link rel="stylesheet" type="text/css" href="src/Font-Awesome-3.2.1/css/font-awesome.min.css"/>
		<script src="src/js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$('#nav-r').css({		
					width:'40px',
					height:$(window).height(),
					color:'red',										
					background:'black',
					 position:'fixed',
					  right:'10px',
					  opacity:0.4,
					  zIndex:3					 
				})
				$('#list').css(
					{width:'40px',
					height:$(window).height(),																			
					 position:'fixed',
					  right:'10px',					 
					  zIndex:4,
					 textAlign: 'center'									 
					}
				)
				$('#list-up>li,#list-down>li').find('div').hide();
				$('#list-up>li,#list-down>li').mouseenter(function(){
					//console.log($(this).index())
					$(this).css({background:'#ff5072'}).siblings().css({background:'#999999'})
					$(this).find('div').show().closest('li').siblings().find('div').hide();
				})
				$('#list-up>li,#list-down>li').mouseleave(function(){
					$(this).css({background:'#999999'})
					$('#list-up>li,#list-down>li').find('div').hide();
				})				
				$('li:last').click(function(){
						//console.log('aa')
						$(window).scrollTop(0);
					})
				
				
			})
		</script>
	</head>
	<body style="height:2000px">
		<div id="nav-r">
			
		</div>
		
		<div id="list">
			<ul id="list-up">
				<li><i class="icon-shopping-cart icon-2x" ></i>
					<div id="cart">
						购物车
					</div>
				</li>
				<li><i class=" icon-user-md icon-2x"></i>
					<div id="per-c">
						个人中心
					</div>
				</li>
				<li><i class="icon-heart icon-2x"></i>
					<div id="heart">
						我的收藏
					</div>
				</li>
				<li><i class="icon-tasks icon-2x"></i>
					<div id="indent">
						我的订单
					</div>
				</li>				
			</ul>
			
			<ul id="list-down">
				<li><i class="icon-stethoscope icon-2x" ></i>
					<div id="kef">
						在线客服
					</div>
				</li>
				<li id="gotop"><i class="icon-eject icon-2x"></i>
					<div id="db">
						返回顶部
					</div>
				</li>
						
			</ul>
		</div>
	</body>
</html>
